$mainColor: #3F82FD;
$mainColorActive: rgba($mainColor, 0.7);
$mainBd: #f7f7f7;
$hoverBd: #eeeeee;
$mainBlack1: #333333;
$mainBlack2: #666666;
$mainBlack3: #999999;
$lineColor: #ebedf0;
$shadow: 0 0 20rpx -5rpx rgba(0, 0, 0, 0.1);

%clear-float {
	&:after {
		display: block;
		content: "clear";
		height: 0;
		clear: both;
		overflow: hidden;
		visibility: hidden;
	}
}

@mixin line($line: 1) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $line;
	overflow: hidden;
	word-break: break-all;
}

.item-wrap {
	position: relative;
	.item {
		position: absolute;
		width: 100%;
		z-index: 1;
		&.itemTransition {
			transition: transform 0.3s;
		}
		&.zIndex {
			z-index: 2;
		}
		&.cur {
			transition: initial;
		}
		&.fixed {
			z-index: 0 !important;
		}
	}
}

.info {
	position: relative;
	padding-top: 100%;
	background: #ffffff;
	&__item {
		position: absolute;
		border: 1rpx solid $lineColor;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 10rpx;
		box-sizing: border-box;
		.image {
			width: 100%;
			height: 100%;
		}
	}
}

.cell {
	display: flex;
	padding: 20rpx;
	border-bottom: 1rpx solid $lineColor;
	background: #FFFFFF;
	&__hd {
		font-size: 0;
		.image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}
	}
	&__bd {
		flex: 1;
		.name {
			@include line(2);
			font-size: 28rpx;
			margin-bottom: 12rpx;
		}
		.des {
			@include line(2);
			color: $mainBlack2;
			font-size: 24rpx;
		}
	}
}
